<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>媒体对象</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin:100px">
<!-- 
	媒体对象：可以包含图片、音频或视频等媒体
	
	1.基本实例
		1) 	.media 						//对父容器添加

		2)	.media-left 				//左区域
			.media-right 				//右区域
			.media-object 				//对img添加.防止错位

		3)	.media-body 				//主题(右区域)
			.media-heading				//对标题添加

	2.对齐方式
		1)	.media-top 					//默认
			.media-middle
			.media-bottom

	3.媒体列表
		1)	.media-list 				//将每个media存放在media-body内后即可
 -->
	
	<!-- 左区域 + 右区域 -->
	<!-- <div class="media">
		<div class="media-left media-middle">
			<img class="media-object" src="img/2.jpg" alt="图片" width="100">
		</div>
		<div class="media-body">
			<h4 class="media-heading">企鹅 （动物名称）</h4>
			<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽...</p>
		</div>

		<div class="media-body">
			<h4 class="media-heading">企鹅 （动物名称）</h4>
			<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽...</p>
		</div>
		<div class="media-right">
			<img class="media-object" src="img/2.jpg" alt="图片" width="100">
		</div>
	</div> -->

	<!-- 媒体列表 -->
	<ul class="media-list">
		<li class="media">
			<div class="media-left media-middle">
				<img class="media-object" src="img/2.jpg" alt="图片" width="100">
			</div>
			<div class="media-body">
				<h4 class="media-heading">企鹅 （动物名称）</h4>
				<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽...</p>

				<div class="media">
					<div class="media-left media-middle">
						<img class="media-object" src="img/2.jpg" alt="图片" width="100">
					</div>
					<div class="media-body">
						<h4 class="media-heading">企鹅 （动物名称）</h4>
						<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽...</p>
					</div>
				</div>

			</div>
		</li>
		<li class="media">
			<div class="media-left media-middle">
				<img class="media-object" src="img/2.jpg" alt="图片" width="100">
			</div>
			<div class="media-body">
				<h4 class="media-heading">企鹅 （动物名称）</h4>
				<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽...</p>
			</div>
		</li>
	</ul>







	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>